<template>
	<div class="switchome">
		<div class="con">
			<el-row style="background-color: #1D6AFF;color: #fff;">
				<el-col :span="23">
					<div class="grid-content bg-purple title">房屋信息</div>
				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple-light" @click="close">
						<i class="el-icon-close close"></i>
					</div>
				</el-col>
			</el-row>
			<div class="conList">
				<el-row>
					<el-col :span="12">
						<div class="grid-content bg-purple">我的房屋</div>
					</el-col>
					<el-col :span="12">
						<div class="grid-content bg-purple-light">
							<el-select v-model="value" placeholder="请选择" @change="changeBt">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
						   :value="item.value">
								</el-option>
							</el-select>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<div class="grid-content bg-purple">我的房屋位置</div>
					</el-col>
					<el-col :span="12">
						<div class="grid-content bg-purple-light">
							{{address}}
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<div class="grid-content bg-purple">详细地址</div>
					</el-col>
					<el-col :span="12">
						<div class="grid-content bg-purple-light">
							{{explanaddress}}
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<div class="grid-content bg-purple">我的房屋面积：</div>
					</el-col>
					<el-col :span="12">
						<div class="grid-content bg-purple-light">
							{{area}}m²
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<div class="grid-content bg-purple">我的房屋类型：</div>
					</el-col>
					<el-col :span="12">
						<div class="grid-content bg-purple-light">
							{{type}}
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="text_btn">
				 <el-button round size="medium" @click="close">取消</el-button>
				  <el-button round type="primary" size="medium" @click="sure">确认</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				options: [],
				value: '',
				list:'',
				area:'',
				type:'',
				explanaddress:'',
				address:''
			}
		},
		created() {
			this.getlist()
		},
		methods: {
			changeBt(e){
				for(let i=0;i<this.list.length;i++){
					if(this.list[i].projectId == e){
						this.address = this.list[i].provinceName+this.list[i].cityName+this.list[i].districtName
						this.explanaddress = this.list[i].position;
						this.area =  this.list[i].roomArea;
						this.type =  this.list[i].roomTypeName
					}
				}
				
			},
			sure(){
				if(this.value==''){
					this.$message({
						type: 'info',
						message: '请选择房屋'
					});
					return;
				}
				console.log(this.value);
				let projectId;
				for(let i=0;i<this.list.length;i++){
					if(this.list[i].projectId == this.value){
						projectId = this.value
					}
				}
				// 设置默认房屋
				this.$axios({
					method: 'post',
					url: this.$api + '/app2/project/updateDefault',
					data: {
						projectId:projectId
					},
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(res=>{
					if(res.data.code==200){
						this.$message({
							type: 'success',
							message: '成功!'
						});
						this.$router.push({
							path: '/optimization'
						})
					}else{
						this.$message({
							type: 'info',
							message: res.data.msg
						});
					}
				})
				
			},
			getlist(){
				let projectId;
				this.$axios({
					method: 'post',
					url: this.$api + '/app2/project/queryHousing',
					data: {},
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data,'data')
						if(res.data.data =='' || res.data.data == null){
							this.$message({
								type: 'info',
								message: res.data.msg
							});
							return;
						}else{
							let dateArr = res.data.data;
							// console.log(dateArr)
							this.address = dateArr.project.provinceName+dateArr.project.cityName+dateArr.project.districtName
							this.explanaddress = dateArr.project.position;
							this.area =  dateArr.project.roomArea;
							this.type =  dateArr.project.roomTypeName
							
						}
						
						
						
					} else {
						this.$message({
							type: 'info',
							message: res.data.msg
						});
					}
				})
				this.$axios({
					method: 'post',
					url: this.$api + '/app2/project/queryHousings',
					data: {},
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.list = res.data.data;
						for(let i=0;i<res.data.data.length;i++){
							let arr={value:'',label:''}
							arr.value=res.data.data[i].projectId;
							arr.label=res.data.data[i].provinceName+res.data.data[i].cityName+res.data.data[i].districtName;
							this.options.push(arr)
						}
						
					} else {
						this.$message({
							type: 'info',
							message: res.data.msg
						});
					}
				})
			},
			close() {
				this.$router.push({
					path: '/optimization'
				})
			}
		}
	}
</script>

<style scoped>
	.text_btn{
		width: 60%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		margin-top: 40px;
	}
	.text_btn button{
		width: 130px;
	}
	.conList {
		width: 70%;
		margin: 0 auto;
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.switchome {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0px;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.title {
		height: 60px;
		line-height: 60px;
		text-align: center;
	}

	.con {
		width: 40%;
		height: 50%;
		position: fixed;
		top: 15%;
		left: 30%;
		background-color: #fff;
	}

	.close {
		font-size: 25px;
		margin-top: 15px;
	}
</style>
